<template>
	<view class="add-secret" @click="changeItem()">
		<view class="item" v-for="i of 3" :key="i">
			<view class="title">
				<text class="number">{{i}}</text>
				<uni-combox
					@changeItem="changeItem"
					:ref="`combox${i}`"
					:index="i"
					class="select-filter"
					:candidates="problemInfoMap"
					placeholder="请选择"
					:border="false"
					v-model="cur_option[`problem${i}`]"
					@change="(index)=>{comboxChange(i, index)}"></uni-combox>
			</view>
			<view class="input">
				<input type="text" maxlength="30" :value="cur_option[`answer${i}`]" @input="(eve)=>{answersInput(eve, i)}">
			</view>
		</view>
		<view class="tips">
			三个问题都是必填
		</view>
		<view class="xd-btn-text" @click="addSecret()">
			提交
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			
			answersText1: '',
			answersText2: '',
			answersText3: '',
			answers: {},
			keepData: {},
			problemInfoMap: {},
			cur_option: {
			},
			optionId: [],
			isStudent: 1,
      protectionInfo: {}
		}
	},
	onLoad(options){
		this.isStudent = options.isStudent

		this.getProblemInfo(options.isExistence)
	},
	methods: {
		getAnswer(){
			this.api.get('secretProtection/getSecretProtectionInfo').then(res=>{
				if(res.data.state!='ok')return;
				let Answer = res.data.Answer || {}
				let data = {
					problem1: Answer.problem1,
					problem2: Answer.problem2,
					problem3: Answer.problem3,
					answer1: Answer.answer1,
					answer2: Answer.answer2,
					answer3: Answer.answer3,
				}
				this.cur_option = data
			})
		},
		getProblemInfo(isExistence){
      		if(isExistence==1){
				this.getAnswer()
			}
			
			this.api.get('secretProtection/getProblemInfo').then(res=>{
				let data = res.data.problemInfoMap;
				Object.assign(this.keepData, data)
				this.problemInfoMap = data
			})
		},
		addSecret(){
			let params = {}, msg = '';
			params = Object.assign(this.cur_option);
			
			if(Object.keys(params).length == 6){
				for (let key in params) {
					if(params[key]==''){
						msg = '密码保护需要填写三个问题和答案'
						break
					}
				}
			}else{
				msg = '密码保护需要填写三个问题和答案'
			}
			if(msg!=''){
				uni.showToast({
					title: msg,
					icon: 'none',
					mask: true,
					position: "bottom"
				})
				return
			}
			this.api.post('secretProtection/addSecretProtection', params).then(res=>{
				if(res.data.state == 'ok'){
					uni.navigateBack({
						delta: 1
					})
				}
			})
		},
		changeItem(val){
			for(let j=1; j<=3; j++){
				if(j!=val){
					this.$refs[`combox${j}`][0].onBlur()
				}
				
			}
		},
		comboxChange(i, index){
			i = i + '';
			let obj = {}
			let keys = this.optionId[i-1]?Object.keys(this.optionId[i-1]):[]
			if(keys.indexOf(i)==-1){
				obj[i] = index
				this.optionId.splice(i, 0, obj)
				delete this.problemInfoMap[index]
			}else{
				let key = Object.values(this.optionId[i-1])[0];
				delete this.problemInfoMap[index]
				this.problemInfoMap[key] = this.keepData[key];
				this.optionId[i-1][i] = index
			}
			
			

		},
		answersInput(eve, i){
			this.$set(this.cur_option, `answer${i}`, eve.detail.value)
		},
	}
}
</script>
<style lang="less" scoped>
	/deep/.uni-combox__input-plac{
		color: #555555;
	}
	/deep/.uni-combox__input-box{
		.uni-icons{
			color: #555555!important;
		}
	}
	.add-secret{
		padding: 100rpx 60rpx;
		min-height: calc(100vh - 44px);
		box-sizing: border-box;
		.item{
			margin-bottom: 80rpx;
		}
		.title{
			display: flex;
			align-items: center;
		}
		.select-filter{
			min-width: 500rpx;
			width: auto;
			// border-bottom: 2rpx solid #f2f2f2;
		}
		.number{
			display: inline-block;
			width: 50rpx;
			height: 38rpx;
			background-color: #55acee;
			border-radius: 10rpx;
			color: #fff;
			margin-right: 32rpx;
			text-align: center;
		}
		.input{
			margin-top: 40rpx;
			height: 70rpx;
			
			width: 100%;
			background-color: #f2f2f2;
			border-radius: 10rpx;
			input{
				height: 70rpx;
				line-height: 70rpx;
				width: 88%;
				padding-left: 40rpx;
				font-size: 26rpx;
			}
		}
		.tips{
			margin: -60rpx 0 40rpx;
			text-align: right;
			color: #d9001b;
			font-size: 24rpx;
		}
		.xd-btn-text{
			display: block;
			text-align: center;
		}
	}
</style>